<template>
    <div class="dialog">
        <el-dialog
            :title="dialog.title"
            :visible="dialog.show"
            :close-on-press-escape ="false"
            :close-on-click-modal ="false"
            :modal-append-to-body ="false"
        >
            <div class="form">
                <el-form
                     ref="form" 
                    :model="formData"
                    :rules="form_rules"
                    label-width="120px"
                    style="margin:10px;width:auto;"
                >
                    <el-form-item label="收支类型：">
                        <el-select v-model="formData.type" placeholder="收支类型">
                            <el-option v-for="(formtype,index) in format_type_list" 
                            :key="index"
                            :label="formtype" :value="formtype">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收支描述：" prop="describe">
                        <el-input type="describe" v-model="formData.describe"></el-input>
                    </el-form-item>

                    <el-form-item label="收入" prop="income">
                        <el-input type="income" v-model="formData.income"></el-input>
                    </el-form-item>

                    <el-form-item label="支出：" prop="expend">
                        <el-input type="expend" v-model="formData.expend"></el-input>
                    </el-form-item>

                    <el-form-item label="账户现金:" prop="cash">
                        <el-input type="cash" v-model="formData.cash"></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input type="remark" v-model="formData.remark"></el-input>
                    </el-form-item>

                    <el-form-item class="text-right">
                        <el-button @click="dialog.show = false">取 消</el-button>
                        <el-button type="primary"  @click="onSubmit('for')">提 交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'dialog',
    //父传子
    props:{
        dialog:Object,
        formData:Object
    },
    methods:{
        //提交
       onSubmit(form) {
        this.$refs.form.validate(valid =>{
            if(valid){
                //console.log(this.formData)
                //判断是添加还是修改   
                const url = this.dialog.option =='add' ? 'add': `edit/${this.formData.id}`;
                
                this.$axios.post(`/api/profiles/${url}`, this.formData).then(res =>{
                    ///添加成功
                    this.$message({
                        //判断是添加成功还是修改成功的信息提示
                        message: this.dialog.message =='add' ? 'add':`${this.dialog.message}`,
                        type:'success',
                    })
                    //隐藏对话框
                    this.dialog.show = false;
                    //添加完成自动刷新 (让父级执行)
                    this.$emit('update');
                })

            }
        })
        
      }
    },
    data(){
        return{
            
            //当前收入
            format_type_list:[
                '提现',
                '提现手续费',
                '充值',
                '优惠券',
                '充值立卷',
                '转账'
            ],
            //校验
            form_rules:{
                describe:[{required:true, message:'收支描述不能为空', trgger:'blur'}],
                income:[{ required:true, message:'收入不能为空', trgger:'blur'} ],
                expend:[{ required:true, message:'支出不能为空', trgger:'blur'}],
                cash:[{ required:true, message:'账号不能为空', trgger:'blur'}]

            }
        }
    }
}
</script>